<template>
    <view class="search-input">
        <uni-easyinput @blur="handleBlur" @input="searchCompany($event)" :maxlength="50" @focus="handleFocus"
            prefixIcon="search" v-model="searchValue" placeholder="请输入企业名称进行税务查询">
            <template #right>
                <image v-if="activityIsOpen" class="icon" src="https://julimeng-prod.oss-cn-hangzhou.aliyuncs.com/managehub/MP/activity/icon.png" mode="aspectFit" />
            </template>
        </uni-easyinput>
        <view class="search-box" v-show="serchList.length && showSelect">
            <scroll-view scroll-y style="max-height: 240rpx" @scrolltolower="scrolltolower">
                <view class="option" v-for="(option, index) in serchList" :key="index" @click.stop="selectCompany(option)">
                    <view class="taxpayerName">{{ option.taxpayerName }}</view>
                </view>
                <view class="loading" v-if="serchList.length && searchLoading">
                    <uv-loading-icon :show="searchLoading" text="加载数据中...."></uv-loading-icon>
                </view>
            </scroll-view>
        </view>
        <view class="mask" @click="closeSelect" v-show="serchList.length && showSelect"> </view>
        <authorize @onLoadFun="onLoadFun" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
    </view>
</template>
<script>
import Authorize from "@/components/Authorize.vue";
import { mapGetters } from 'vuex'
import { getEnterpriseSearch } from "@/api/water";
export default {
    name: 'searchInput',
    props: {

    },
    // #ifdef MP-WEIXIN
    options: {
        styleIsolation: 'shared' // 解除样式隔离
    },
    // #endif
    components: {
        Authorize
    },
    computed: mapGetters(['isLogin', 'activityIsOpen']),
    data() {
        return {
            searchValue: '',
            isShowSearchBtn: false,
            serchList: [],
            showSelect: false,
            isShowAuth: false,
            where: {
                keyword: "",
                pageNum: 1,

            },
            total: 0,
            searchLoading: false,
            timeoutId: null,
            selectInfo: {},

        }
    },
    methods: {
        closeSelect() {
            this.showSelect = false;
            this.serchList = []
        },
        handleSearch() {

            let reg = /^[^()\/?!\uFF1F\u3001\uFF01]+$/u;
            if (!this.where.keyword) return this.$util.Tips('请输入搜索关键词')
            if (this.where.keyword.length <= 2) return this.$util.Tips('搜索关键字至少三个字')
            if (!reg.test(this.where.keyword)) return this.$util.Tips('请输入正确的关键词')
            this.isShowSearchBtn = true;
            this.searchCompany()
        },
        selectCompany(v) {
            this.selectInfo = v;
            this.serchList = []
            this.showSelect = false;
            uni.navigateTo({
                url: '/pagesWater/taxSearch/index?taxpayerName=' + v.taxpayerName + '&companyCode=' + v.id
            })
        },
        onLoadFun() {

        },
        authColse() {
            this.isShowAuth = false
        },
        handleFocus() {
            this.where.pageNum = 1;
            this.isShowSearchBtn = true
            if (this.where.keyword.length >= 3) {
                let reg = /^[^()\/?!\uFF1F\u3001\uFF01]+$/u;
                if (reg.test(this.where.keyword)) {
                    this.serchList = [];
                    this.getSearchList()
                }
            }
            let params = {
                Um_Key_ButtonName: '搜索框',
                Um_Key_SourcePage: '首页',
            }
            this.$umaTrack.pageClickTrack(params)
        },
        handleBlur() {
            this.isShowSearchBtn = false
        },
        searchCompany(e) {

            this.serchList = [];
            this.showSelect = true;
            if (e != this.where.keyword) {
                this.serchList = [];
                this.where.pageNum = 1;
            }
            this.where.keyword = e?.trim();
            if (e.length > 2) {
                let reg = /^[^()\/?!\uFF1F\u3001\uFF01]+$/u;
                if (!reg.test(e)) return this.$util.Tips(`请输入正确的公司名称或税号`);
                clearTimeout(this.timeoutId);
                // 设置新的定时器
                this.timeoutId = setTimeout(() => {
                    this.getSearchList();
                }, 500);  // 设置防抖的延迟时间（1秒）

            }
        },
        scrolltolower() {
            if (!this.where.keyword) return;
            if (this.where.pageNum * 10 < this.total) {
                this.where.pageNum++;
                this.getSearchList();
            }
        },
        async getSearchList() {
            // #ifdef MP-WEIXIN
            if (!this.isLogin) return this.isShowAuth = true
            // #endif
            this.searchLoading = true;
            let res = await getEnterpriseSearch(this.where);
            if (!res.data.list.length) return this.$util.Tips('暂时没搜到哦')
            let data = res.data.list.map((v) => {
                return {
                    taxpayerName: v.companyName,
                    id: v.establishDate,
                };
            });
            this.serchList = [...this.serchList, ...data];
            this.total = res.data.total;
            this.searchLoading = false;
        },
    },
} 
</script>
<style lang="scss" scoped>
/deep/ .uni-easyinput__content {
    width: 688rpx;
    height: 96rpx;
    border-radius: 20rpx;
}

/deep/ .uni-icons {
    color: #2872FD !important;
}

/deep/ .uniui-clear {
    color: #999 !important;
}

.icon {
    width: 46rpx;
    height: 68rpx;
    padding: 0 20rpx 0 10rpx;
    box-sizing: content-box;
}

.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0);
    z-index: 0;
}

/deep/ .uni-easyinput__placeholder-class {
    font-weight: 600;
    font-size: 30rpx;
    color: #E6E6E6;
}

.search-input {
    margin: 30rpx 0 20rpx;
    position: relative;

    .search-box {
        position: absolute;
        width: 100%;
        max-height: 273rpx;
        background: #F7F7F7;
        border-radius: 20rpx;
        padding: 30rpx;
        z-index: 10;
    }
}

.search-btn {
    width: 120rpx;
    height: 64rpx;
    line-height: 64rpx;
    text-align: center;
    background: #2872FD;
    border-radius: 20rpx;
    color: #fff;
}

.option {
    line-height: 40rpx;
    margin-bottom: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .taxpayerName {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0; // 修复flex布局下的收缩问题
    }

    &:last-child {
        margin-bottom: 0rpx;
    }

    .delete {
        width: 30rpx;
        height: 30rpx;
    }
}
</style>